<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 引入ElementUI的CSS文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            background-color: #f0f0f0; /* 淡灰色背景 */
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .center-box {
            width: 50%;
            height: 50%;
            background-color: #f0f0f0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .custom-form {
            width: 80%; /* 调整form宽度 */
        }

        .custom-button {
            margin-right: 10px;
            width: 120px; /* 调整按钮宽度 */
        }
    </style>
</head>
<body>
<div class="center-box">
    <el-form class="custom-form">
        <el-form-item label="录音文本">
            <el-input v-model="text" type="textarea" :rows="3" placeholder="请输入录音文本"></el-input>
        </el-form-item>
        <el-form-item label="文件夹名称">
            <el-input v-model="folderName" placeholder="请输入文件夹名称"></el-input>
        </el-form-item>
        <el-form-item label="文件名称">
            <el-input v-model="fileName" placeholder="请输入文件名称"></el-input>
        </el-form-item>
        <el-form-item style="text-align: center;">
            <el-button @click="generateAudio" :loading="loading"  type="primary" class="custom-button">生成录音</el-button>
            <el-button @click="downloadAudio" type="success" class="custom-button">下载录音</el-button>
        </el-form-item>
    </el-form>
</div>

<!-- 引入Vue和ElementUI的JS文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    new Vue({
        el: '.center-box',
        data: {
            text: '', // 绑定输入框的文本内容
            folderName: '',
            fileName: '',
            loading: false // 控制Loading状态
        },
        methods: {
            async generateAudio() {
                try {
                    this.loading = true;
                    const requestData = {content: this.text, fileName: this.fileName, folderName: this.folderName};
                    const response = await fetch('http://192.168.3.210:8024/cmd/submit', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(requestData)
                    });

                    if (response.ok) {
                        const resultText = await response.text();
                        // this.$message.info(resultText);
                        this.$alert(resultText, '返回结果', {
                            showClose: true // 不显示关闭按钮
                        });
                    } else {
                        this.$message.error('生成失败！');
                    }
                } catch (error) {
                    this.$message.error('生成失败！');
                } finally {
                    this.loading = false; // 关闭Loading动画
                }
            },
            async downloadAudio() {
                try {
                    const response = await fetch('http://192.168.3.210:8024/download'); // 调用下载接口
                    if (response.ok) {
                        const blob = await response.blob();
                        const url = window.URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = 'tts_res.tar.gz'; // 设置下载文件名
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                        window.URL.revokeObjectURL(url);
                        this.$message.success('开始下载...');
                    } else {
                        this.$message.error('下载失败！');
                    }
                } catch (error) {
                    this.$message.error('下载失败！');
                }
            }
        }
    });
</script>
</body>
</html>